<template>
  <span class="keyword-hightlight" v-html="html"></span>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
  keyword: {
    type: String,
    require: true
  },
  value: {
    type: String,
    require: true
  }
})
const html = computed(() => {
  var regex = new RegExp(props.keyword as string, "g");
  return (props.value as string).replace(regex, `<a class="afast-keyword-highlight">${props.keyword}</a>`);
})
</script>
<style lang="scss">
.afast-keyword-highlight{
  color: var(--highlight-text-color)
}
</style>